<style>
    * {padding:0;margin:0}
    body {background-color: black;}
</style>
<body>
    <div class="xuetiao" style="width:100px;height:50px;background:#fff">
        <div class="xue" style="width:100px;height:50px;background:red"></div>
    </div>
</body>
<script>
setInterval(function(){
    var imgObj=document.createElement('img')
    imgObj.src='./star.gif'
    var min=20
    var max=40
    var temp=Math.floor( Math.random()*(max-min+1)+min)
    imgObj.width=temp
    var leftMin=0
    var leftMax=(window.innerWidth|| document.documentElement.clientWidth)-temp
    var left=Math.floor( Math.random()*(leftMax-leftMin+1)+leftMin)
    var topMin=0
    var topMax=(window.innerHeight|| document.documentElement.clientHeight)-temp
    var top=Math.floor( Math.random()*(topMax-topMin+1)+topMin)
    imgObj.style.position='absolute'
    imgObj.style.left=left+'px'
    imgObj.style.top=top+'px'
    document.body.appendChild(imgObj)
},1500)

setInterval(function(){
    xue=parseInt(document.querySelector('.xue').style.width)
    document.querySelector('.xue').style.width=xue-10+'px'
},2000)

document.body.onclick=function(evt){
    var e=evt || window.event
    var target=e.target || e.srcElement
    if(target.nodeName==='IMG'){
        document.body.removeChild(target)
        if(xue+15 < 100){
            document.querySelector('.xue').style.width=xue+15+'px'
        }
    }
}
</script>